前端实现在线预览word(docx)，pdf，excel类型的文件 |
您所在的位置：网站首页 › 在线预览word excel › 前端实现在线预览word(docx)，pdf，excel类型的文件 |
前端实现在线预览word(docx)，pdf，excel类型的文件
|
实现方案
找了网上的实现方案，效果看起来不错，放在下面的表格里，里面有一些是可以直接通过npm在vue中引入使用。 文档格式老的开源组件替代开源组件word（docx）mammothdocx-preview(npm)powerpoint（pptx）pptxjspptxjs改造开发excel（xlsx）sheetjs、handsontableexceljs(npm)、handsontable(npm)pdf（pdf）pdfjspdfjs-dist(npm) docx文件实现前端预览代码实现 首先npm i docx-preview (官网连接:https://www.npmjs.com/package/docx-preview) 引入renderAsync方法 将blob数据流传入方法中，渲染word文档 只支持Blob | ArrayBuffer | Uint8Array这三种类型的数据 import { defaultOptions, renderAsync } from "docx-preview"; renderAsync( Blob | ArrayBuffer | Uint8Array, document.getElementById("container"), null,{ className: string = "docx", // 默认和文档样式类的类名/前缀 inWrapper: boolean = true, // 启用围绕文档内容渲染包装器 ignoreWidth: boolean = false, // 禁止页面渲染宽度 ignoreHeight: boolean = false, // 禁止页面渲染高度 ignoreFonts: boolean = false, // 禁止字体渲染 breakPages: boolean = true, // 在分页符上启用分页 ignoreLastRenderedPageBreak: boolean = true,//禁用lastRenderedPageBreak元素的分页 experimental: boolean = false, //启用实验性功能（制表符停止计算） trimXmlDeclaration: boolean = true, //如果为真，xml声明将在解析之前从xml文档中删除 debug: boolean = false, // 启用额外的日志记录 } );实现效果 使用步骤 首先npm i pdfjs-dist设置PDFJS.GlobalWorkerOptions.workerSrc的地址通过PDFJS.getDocument处理pdf数据，返回一个对象pdfDoc通过pdfDoc.getPage单独获取第1页的数据创建一个dom元素，设置元素的画布属性通过page.render方法，将数据渲染到画布上代码实现 import * as PDFJS from "pdfjs-dist/legacy/build/pdf"; // 设置pdf.worker.js文件的引入地址 PDFJS.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/legacy/build/pdf.worker.entry.js"); // data是一个ArrayBuffer格式，也是一个buffer流的数据 PDFJS.getDocument(data).promise.then(pdfDoc=>{ const numPages = pdfDoc.numPages; // pdf的总页数 // 获取第1页的数据 pdfDoc.getPage(1).then(page =>{ // 设置canvas相关的属性 const canvas = document.getElementById("the_canvas"); const ctx = canvas.getContext("2d"); const dpr = window.devicePixelRatio || 1; const bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1; const ratio = dpr / bsr; const viewport = page.getViewport({ scale: 1 }); canvas.width = viewport.width * ratio; canvas.height = viewport.height * ratio; canvas.style.width = viewport.width + "px"; canvas.style.height = viewport.height + "px"; ctx.setTransform(ratio, 0, 0, ratio, 0, 0); const renderContext = { canvasContext: ctx, viewport: viewport, }; // 数据渲染到canvas画布上 page.render(renderContext); }) })实现效果 使用步骤 npm install xlsx ，注意要安装0.16.0的版本 //在线预览excel import XLSX from "xlsx"; //我们一般从后台获取文件数据或者本地读取xlsx格式的文件基本都是获取的arraybuffer类型，我们将其转为unit8Array格式的数组，之后xlsx插件会帮我们将其解析。 //最终解析出来的数据格式是一个数组，数组每一项是一个对象，该对象代表之前xlsx每一行数据。对象中的每个属性代表每一列的表头 var upload = function (e) { const reader = new FileReader(); var file = e.target.files[0]; reader.readAsArrayBuffer(file);//将文件对象读取为arraybuffer类型的数据 reader.onload = (event) => { var data = new Uint8Array(event.target.result); var workbook = XLSX.read(data, { type: "array" }); var sheetNames = workbook.SheetNames; // 工作表名称集合 var worksheet = workbook.Sheets[sheetNames[0]]; var excelData = XLSX.utils.sheet_to_json(worksheet); console.log(excelData)//最终解析xlsx格式的文件得出来的数据 }; };实现效果 主要是通过jszip库，加载二进制文件，再经过一些列处理处理转换实现预览效果，实现起来比较麻烦，就不贴代码了，感兴趣的可以下载代码查看。 实现效果 |
ps:当然服务器也可以穿pdf的在线预览链接，我们通过window.open(’pdf地址‘) 重新打开一个浏览器窗口就能浏览了。
代码地址：https://github.com/zhuye1993/file-view 作者:竹业 https://juejin.cn/post/7071598747519549454【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |